<!-- 论坛中心 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>论坛中心</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <!-- 样式 -->
    <link rel="stylesheet" href="../../css/style.css"/>
    <!-- 主题（主要颜色设置） -->
    <link rel="stylesheet" href="../../css/theme.css"/>
    <!-- 通用的css -->
    <link rel="stylesheet" href="../../css/common.css"/>
</head>
<style>
    /* 标题样式 */
    .index-title {
        background: linear-gradient(135deg, #7B6CF8, #9A82F5) !important;
        color: #fff !important;
        padding: 20px 0 !important;
        margin: 20px auto;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(123, 108, 248, 0.2);
        width: 80%;
    }

    .line-container .line {
        font-size: 24px;
        color: #7B6CF8;
        margin: 15px 0;
    }

    /* 表单容器 */
    .forum-container {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        margin: 20px auto;
        padding: 30px;
        max-width: 800px;
    }

    /* 输入框样式 */
    .layui-input {
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 10px 15px;
        transition: all 0.3s;
    }

    .layui-input:focus {
        border-color: #7B6CF8;
        box-shadow: 0 0 8px rgba(123, 108, 248, 0.1);
    }

    /* 单选按钮 */
    .layui-form-radio > i {
        color: #7B6CF8;
    }

    .layui-form-radioed > i {
        color: #7B6CF8 !important;
    }

    /* 富文本编辑器 */
    .tox-tinymce {
        border-radius: 8px !important;
        border: 1px solid #eee !important;
    }

    /* 按钮样式 */
    .btn-submit {
        background: linear-gradient(45deg, #7B6CF8, #9A82F5) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 0 30px !important;
        height: 40px;
        box-shadow: 0 4px 12px rgba(123, 108, 248, 0.3);
        transition: transform 0.2s;
    }

    .layui-btn-primary {
        border-color: #ddd !important;
        color: #666 !important;
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        opacity: 0.9;
    }

    /* 分页样式 */
    .layui-laypage a, .layui-laypage span {
        border-radius: 6px;
        padding: 0 15px;
        height: 32px;
        line-height: 32px;
    }

    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background: #7B6CF8 !important;
    }

    @media (max-width: 768px) {
        .forum-container {
            padding: 20px;
            margin: 10px;
        }

        .index-title {
            width: 90%;
            font-size: 20px;
        }

        .layui-form-label {
            text-align: left !important;
        }
    }
</style>
<body>
<div id="app">
    <!--			&lt;!&ndash; 轮播图 &ndash;&gt;-->
    <!--			<div class="layui-carousel" id="swiper">-->
    <!--				<div carousel-item id="swiper-item">-->
    <!--					<div v-for="(item,index) in swiperList" v-bind:key="index">-->
    <!--						<img class="swiper-item" :src="item.img">-->
    <!--					</div>-->
    <!--				</div>-->
    <!--			</div>-->
    <!--			&lt;!&ndash; 轮播图 &ndash;&gt;-->

    <!-- 标题 -->
    <h2 class="index-title">论坛信息</h2>
    <div class="line-container">
        <p class="line"> 论坛中心 </p>
    </div>
    <!-- 标题 -->

<!--    &lt;!&ndash; banner &ndash;&gt;-->
<!--    <div class="banner"></div>-->
<!--    &lt;!&ndash; banner &ndash;&gt;-->

    <div class="forum-container">
        <form class="layui-form login-form" lay-filter="myForm">
            <input type="hidden" name="id"/>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">标题：</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">类型：</label>
                <div class="layui-input-block" style="text-align: left;">
                    <input type="radio" name="isdone" value="开放" title="公开" checked>
                    <input type="radio" name="isdone" value="关闭" title="私人">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">内容：</label>
                <div class="layui-input-block" style="text-align: left;">
                    <textarea name="content" id="content">请输入内容</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: right;margin-right: 30px;">
                    <button class="layui-btn btn-submit" lay-submit lay-filter="*">修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- layui -->
<script src="../../layui/layui.js"></script>
<!-- vue -->
<script src="../../js/vue.js"></script>
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            // 轮播图
            swiperList: [{
                img: '../../img/banner.jpg'
            }]
        },
        methods: {
            jump(url) {
                jump(url)
            }
        }
    })

    layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'tinymce'], function () {
        var layer = layui.layer;
        var element = layui.element;
        var carousel = layui.carousel;
        var http = layui.http;
        var form = layui.form;
        var jquery = layui.jquery;
        var tinymce = layui.tinymce

        // 获取轮播图 数据
        http.request('config/list', 'get', {
            page: 1,
            limit: 5
        }, function (res) {
            if (res.data.list.length > 0) {
                var swiperItemHtml = '';
                for (let item of res.data.list) {
                    if (item.name.indexOf('picture') >= 0 && item.value && item.value != "" && item.value != null) {
                        swiperItemHtml +=
                            '<div>' +
                            '<img class="swiper-item" src="' + item.value + '">' +
                            '</div>';
                    }
                }
                jquery('#swiper-item').html(swiperItemHtml);
                // 轮播图
                carousel.render({
                    elem: '#swiper',
                    width: swiper.width, height: swiper.height,
                    arrow: swiper.arrow,
                    anim: swiper.anim,
                    interval: swiper.interval,
                    indicator: swiper.indicator
                });
            }
        });

        // 初始化编辑器
        var edit = tinymce.render({
            elem: "#content",
            height: 600,
            images_upload_handler: function (blobInfo, succFun, failFun) {
                var xhr, formData;
                var file = blobInfo.blob(); //转化为易于理解的file对象
                xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
                xhr.open('POST', http.baseurl + 'file/upload');
                xhr.setRequestHeader("Token", localStorage.getItem('Token')); //设置请求头
                xhr.onload = function () {
                    var json;
                    if (xhr.status != 200) {
                        failFun('HTTP Error: ' + xhr.status);
                        return;
                    }
                    json = JSON.parse(xhr.responseText);
                    // if (!json || typeof json.location != 'string') {
                    // 	failFun('Invalid JSON: ' + xhr.responseText);
                    // 	return;
                    // }
                    if (!json || typeof json.file != 'string') {
                        failFun('Invalid JSON: ' + xhr.responseText);
                        return;
                    }
                    succFun(http.baseurl + '/upload/' + json.file);
                };
                formData = new FormData();
                formData.append('file', file, file.name); //此处与源文档不一样
                xhr.send(formData);
            }
        }, (opt) => {

        });

        //
        var id = http.getParam("id");
        http.request('forum/list/' + id, 'get', {}, function (res) {
            form.val("myForm", res.data);
            tinymce.get('#content').setContent(res.data.content)
        });


        form.on('submit(*)', function (data) {
            // 获取富文本的内容
            var content = tinymce.get('#content').getContent()
            data = data.field;
            data.content = content;
            data.username = localStorage.getItem('adminName');
            data.userid = localStorage.getItem('userid');
            data.parentid = 0;
            http.requestJson('forum/update', 'post', data, function (res) {
                layer.msg('发表成功', {
                    time: 2000,
                    icon: 6
                }, function () {
                    back();
                });
            });
            return false;
        });

    });
</script>
</body>
</html>
